<template>
    <el-button-group v-if="operations">
        <template v-if="groupOperations.length > 0">
            <template v-for="(button) in groupOperations">
            <template v-if="button.show !== false">
                <el-button
                           :disabled="isButtonDisabled(button)"
                           @click="handleOperations(button)"
                           :type="button.type || aiButtonStyle(button).type || 'primary'"
                           :icon="button.icon || aiButtonStyle(button).icon"
                           size="mini"
                           :title="button.title"
                           :loading="buttonLoading(button)"
                           :key="button.code" v-popover:[buttonPopover(button)]>{{operationButtonLabel(button)}}</el-button>
                <el-popover
                        v-if="button.popover"
                        :key="button.code + 'popover'"
                        :ref="button.popover.ref || button.code"
                        :placement="button.popover.placement"
                        :title="button.popover.title"
                        :width="button.popover.width"
                        :trigger="button.popover.trigger"
                        :content="button.popover.trigger.content">
                    <slot :name="button.popover.ref || button.code"></slot>

                </el-popover>
            </template>
            </template>
        </template>

        <el-dropdown size="mini" v-if="moreOperations.length > 0" @command="handleOperations">
            <el-button :type="operationMoreButtonType"
                       :icon="operationMoreButtonIcon"
                       size="mini"
            >
                {{operationMoreButtonText}}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
                <template v-for="(button,index) in moreOperations">
                <el-dropdown-item
                        v-if="button.show !== false"
                        :disabled="isButtonDisabled(button)"
                        :command="button"
                        :title="button.title"
                        :divided="button.divided"
                        :icon="button.icon || aiButtonStyle(button).icon"
                        :loading="buttonLoading(button)"
                        :key="index"
                >{{operationButtonLabel(button)}}</el-dropdown-item>
                </template>
            </el-dropdown-menu>
        </el-dropdown>
    </el-button-group>
</template>

<script>
    import {aiButtonStyle} from "../../tools/StyleTools.js"
    export default {
        name: "ButtonGroup",
        props:{
            /*
             {
                show: Boolean,
                action: Function,String, // click事件 nav
                label:'',           // 按钮标签
                disabled_label:'',           // 按钮禁用状态时label
                code:'',           // 按钮编号 全局唯一
                position:'',           // 按钮位置，default,more
                icon:'',           // 按钮图标
                type:'',           // 按钮主题
                loading: Boolean,           // 按钮加载状态
                disabled: Boolean,           // 按钮禁用状态

             }
             */
            operations:{
                type: Array
            },
            operationMoreButtonType:{
                type: String,
                default: 'primary'
            },
            operationMoreButtonIcon:{
                type: String,
                default: ''
            },
            operationMoreButtonText:{
                type: String,
                default: '更多'
            },
        },
        computed:{
            // 平铺的操作
            groupOperations(){
                let r = []
                if(this.operations){
                    for (let index in this.operations) {
                        let button = this.operations[index]
                        if(button.code == undefined){
                            button.code = 'code' + index;
                        }
                        if(button.position == undefined || button.position == 'default'){
                            r.push(button)
                        }
                    }
                }
                return r
            },
            // 下拉中的操作
            moreOperations(){
                let r = []
                if(this.operations){
                    for (let index in this.operations) {
                        let button = this.operations[index]
                        if(button.code == undefined){
                            button.code = 'code' + index;
                        }
                        if(button.position == 'more'){
                            r.push(button)
                        }
                    }
                }
                return r
            }
        },
        data(){
            return {
                localButtonLoading: {}
            }
        },
        methods:{
            buttonPopover(button){
                return button.popover?(button.popover.ref || button.code):null
            },
            isButtonDisabled(button){
                if(typeof button.disabled == 'function'){
                    return button.disabled()
                }
                return button.disabled
            },
            operationButtonLabel(button){
                if(typeof button.label == 'function'){
                    return button.label()
                }
                if(button.disabled_label !== undefined){
                    if(this.isButtonDisabled(button)){
                        return button.disabled_label
                    }
                }
                return button.label
            },
            aiButtonStyle(button){
                return aiButtonStyle(this.operationButtonLabel(button))
            },
            handleOperations(button) {
                let action = button.action
                if (typeof action == 'function') {
                    action()
                }
                if (action == 'nav') {
                    this.$router.push(button.url)
                }
            },
            buttonLoading(button){
                if (typeof button.loading == 'function') {
                    return button.loading()
                }else {
                    return (button.loading || this.localButtonLoading[button.code])
                }
            },
            // code 按钮编号
            setButtonLoading (code,loading){
                this.$set(this.localButtonLoading,code,loading)
            }
        }
    }
</script>

<style scoped>

</style>